<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-input
          size="small"
          style="width: 200px;"
          v-model="queryParams.keyword"
          :placeholder="$t('common.搜索 仓库/运营账号名')"
          @keyup.enter.native="changeOption(true)"
          clearable @clear="changeOption(false, 'clear')"
        ></el-input>
        <el-button size="small" type="primary" @click="changeOption(true)">{{ $t('common.search') }}</el-button>
      </div>
      <div class="right">
        <el-button type="primary" @click="jumpInfo()">添加国内仓</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        v-loading="loading"
        :data="data"
        border
      >
        <el-table-column
          prop="warehouseName"
          :label="$t('table.大仓库名')"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="adminList"
          :label="$t('table.运营')"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
          <template v-slot="{row}">
            <template v-if="row.adminList.length === 0">
              {{ $t('setting.N个',{num: 0}) }}
            </template>
            <template v-else-if="row.adminList.length === 1">
              {{row.adminList[0].account}}
            </template>
            <template v-else>

              <el-tooltip class="item" effect="dark"  placement="top">
                <template #content>
                  <div
                    v-for="item in row.adminList"
                    :key="item.id"
                  >
                    {{ item.account }}
                  </div>
                </template>
                <div>
                  {{ $t('setting.N个',{num: row.adminList.length}) }}
                </div>
              </el-tooltip>

            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          :label="$t('table.createTime3')"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="operate"
          :label="$t('table.operate')"
          align="left"
          min-width="150"
        >
          <template v-slot="{row}">
            <el-button type="primary" @click="jumpInfo(row)">{{$t('common.edit')}}</el-button>
            <el-button type="danger" @click="delRow(row)" :loading="delLoading" v-if="row.adminList.length === 0">{{$t('common.delete')}}</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="font-grey f13 mgt10">
      </div>
      <div>

      </div>

      <div class="page-wrap">
        <el-pagination
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {delWarehouse, getFlWarehouseList, getWarehouseList} from "@/api/warehouse";
import areaData from 'china-area-data/data'
import request from "@/utils/request";

export default {
  name: 'warehouseList',
  computed: {

  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        keyword: '',
      },
      total: 0,
      data: [], // 表格数据
      warehouseForm: {}, // 仓库表单
      loading: false,
      delLoading: false,
      currentForm: {
        id: '',
        address: {
          fullName: '', // 收货人姓名
          phone: '', // 联系方式
          postCode: '', // 邮编
          provinceText: '', // 省
          cityText: '', // 市
          areaText: '', // 区 ？
          townText: '', // 镇 ？
          address: '', // 详细地址
        },
        shipmentTableType: 1,
      },
      areaCode:{
        province: '',
        city: '',
        area: '',
      },
      rules: {
        fullName: [{ required: true, trigger: 'blur', message: '请填写收货人姓名' }],
        mobile: [
          { required: true, trigger: 'blur', message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/ , message: '手机号格式有误',trigger: 'blur' },
        ],
        phone: [
          { required: true, trigger: 'blur', message: '请填写电话' },
          { pattern: /^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})$/ , message: '电话格式有误',trigger: 'blur' },
        ],
        postCode: [{ required: true, trigger: 'blur', message: '请填写邮编' }],
        provinceText: [{ required: true, trigger: 'blur', message: '请填写所在地区' }],
        areaText: [{ required: true, trigger: 'change', message: '请填写所在地区' }],
        address: [{ required: true, trigger: 'blur', message: '请填写详细地址' }],
      },
      areaData,
      provinceList: {},
      cityList: {},
      areaList: {},
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      this.loading = true
      getFlWarehouseList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData();
    },
    jumpInfo(row = null){
      if(row){
        this.$router.push({
          name: 'editFlWarehouseInfo',
          query: {
            id: row.id
          }
        })
      }else{
        this.$router.push({
          name: 'addFlWarehouseInfo'
        })
      }

    },
    delRow(row){
      this.$warning( '',{
        title: this.$t('setting.删除当前仓库？'),
      })
        .then(()=>{
          this.delLoading = true
          request({
            url: `/warehouse/delFlWarehouse/${row.id}`,
            method: 'delete',
          })
            .then(res=>{
              this.delLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.getData()
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{

        })
    }
  }
}

</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }

}
</style>
